<template>
    <div class="details">
        <div class="details-left">
            <div class="details-left-al">
                <h1 style="margin: 12px 0px 10px; padding: 0px; font-size: 34px; line-height: 1.5; color: #333333; font-family: 'Microsoft Yahei', Avenir, 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
                    {{article.title}}</h1>
                <div class="details-left-Introduction">

                    <!-- <span class="sub_heading_item" v-if="type!==''">分类:{{type}}</span> -->
                    <span class="sub_heading_item">分类:{{article.type}}</span>
                    <span class="sub_heading_item">时间:{{article.time}}</span>
                    <span class="sub_heading_item" v-if="Announcement.length === 0">组织者:{{article.caretakerName}}</span>
                </div>

                <div class="details-left-detail" v-html="article.content">   
               </div>
            </div>
        </div>
        <div class="details-right">
            <div class="one_right_body" v-if="Announcement.length!==0">
                <h4 class="one_right_title">志愿公告</h4>
                <ul class="one_right_list">
                        <li class="item" v-for="(item,index) in Announcement " :key="index">
                            <div class="left_pic">
                                <img src="https://img0.baidu.com/it/u=233301930,3031623456&fm=11&fmt=auto&gp=0.jpg"
                                     alt=""            class="pic"/>
                            </div>
                            <div class="right_txt">
                                <p class="right_txt_title">
                                        {{item.title}}
                                </p>
                                <a href="javascript:;" @click="handletoDatil(item.id)" class="link">阅读全文</a>
                            </div>
                        </li> 
                            
                </ul>
            </div>
<!--            报名或者公告模块-->
            <div class="details-right-note" v-if="Announcement.length==0">
                <div class="last">
                    <div class="details-right-note-item">
                        <i class="icon1  iconfont  icon-ganxingqu"></i>
                        <p>感兴趣</p>
                        <span>{{article.interests}}</span>
                    </div>
                    <div class="details-right-note-item">
                        <i class="icon3 iconfont icon-zhaomu"></i>
                        <p>招募人数</p>
                        <span>{{article.membersNumber}}</span>
                    </div>
                    <div class="details-right-note-item">
                        <i class="icon2 iconfont icon-guanzhu"></i>
                        <p>关注</p>
                        <span>3213131</span>
                    </div>
                </div>
                <div class="box-card-right-right">
  
                    <el-button type="success" @click="handledetail(item.id)" v-if="is_flag===0">报名参加</el-button>
                    <el-button type="warning"  v-if="is_flag===2">审核中</el-button>
                    <el-button type="success" v-if="is_flag===3">已通过</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import apiData from '../assets/apiData';
import {mapState} from 'vuex';
import { ElMessage } from 'element-plus'
  export default {
    name: "details",
    data(){
        return{
            article:[],
            Announcement:[],
            id:'',
            is_artice:false,
            is_org:false,
            is_flag:''
        }
    },
    created(){
       if(this.$route.query.paicheNo!==undefined){
            apiData.xq.getxq(this.$route.query.paicheNo).then(res=>{
                this.is_artice = true;
                this.article  = res.data;
        });

        apiData.Announcement5.getAnnouncement5().then(res=>{
        
            this.Announcement = res.data;
        });
       }else if(this.$route.query.acrtice!==undefined){
         console.log(sessionStorage.getItem('getiphone'));
         let iphone = (sessionStorage.getItem('getiphone')) ;
         apiData.teamId.getTeamId(this.$route.query.acrtice,iphone).then(res=>{
            this.is_flag = res.data[1];
            console.log(this.is_flag);
            this.is_org = true;
             this.article = res.data[0];
        
         });
       }else{
         let iphone =(sessionStorage.getItem('getiphone'));
           apiData.OneToId.getOneToId(this.$route.query.alias,iphone).then(res=>{
            this.is_flag = res.data[1]
              this.is_org = false;
             this.article = res.data[0];
            //  console.log(this.article);
         });
       }
      
    },
     computed:{
          ...mapState(['user','iphone']),
   },
    methods:{
        handletoDatil(id){
               this.$router.push({path: '/details',query:{paicheNo:id}})
        }
    },
    methods:{
        handleChange(value) {
        console.log(value);
      },
      handledetail(){
          console.log(this.id);
        //   先去判断user是否是空
        if(this.user.length!==2){
              ElMessage({
                showClose: true,
                message: '请先登录哦',
                type: 'error'
            });
        }else{
            // 说明是团体加入
            if(this.is_artice){

            }
        }
      }
    },
    filters:{
        from:function(value){
            let a;
            if(value === 1){
                a = '志愿咨询'
            }else if(value === 2){
                a = '信息咨询'
            }else if(value === 3){
                a = '志愿文化'  
            }else if(value === 4){
                a = '政策法规'
            }else{
                 a = value;
            }
            return a;
        }
    }
  }
</script>

<style scoped>
    .one_right_body{
         display: flex;
        flex-direction: column;
        width: 100%;
        height: 680px;
        background-color: #fff;
    }
    .one_right_title{
        width: 100%;
        height: 40px;
    }
    .one_right_list{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        height: 640px;
    }
    .item{
        margin-top: 5px;
        border-top: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        height: 120px;
        align-items: center;
        background-color: #fff;
        justify-content: space-between;
        flex-wrap: wrap;
      
    }
    .left_pic{
        margin-top: 5px;
        width: 40%;
        height: 100px;
    }
    .left_pic img{
        width: 100%;
        height: 100px;
    }

    .right_txt{
        box-sizing: border-box;
        width: 60%;
        height: 100px;
        padding-left: 10px;
        background-color: #fff;
    }
    .right_txt_title{
        font-size: 14px;
        line-height: 22px;
        height: 44px;
        text-align: left;
        margin-top: 5px;
        overflow: hidden;
        margin-bottom: 5px
            
    }
    .link{
        font-size: 14px;
        display: inline-block;
        text-align: left;
        color: #DB4453;
    }
    .details{
        display: flex;
        /*background-color: #fff;*/
        margin: 20px auto;
        /*margin-left: 20px;*/
        width: 1232px;
        /*height: 800px;*/
    }
    .details-left{
        width: 932px;
        /*height: 800px;*/
        /*background-color: salmon;*/
    }
    .details-left-al{
        width: 100%;
        height: 100%;
        margin-left: 60px;
    }
    .details-left-Introduction{
        width: 800px;
        height: 60px;
        /*margin: 5px auto;*/
        text-align: left;
        /*background-color: pink;*/
    }
    .details-left-detail{
        /* padding-left: 10px; */
        width:800px ;
        padding: 0 15px;
        background-color: #fff;
    }
    .details-left-detail img{
       max-width: 800px !important;
    }
    .sub_heading_item{
        display: inline-block;
        margin-right: 20px;
        font-size: 14px;
    }
    .details-right{
        width: 300px;
        height: 800px;
        /*background-color: palegreen;*/
    }
    .details-right-note{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        height: 300px;
        background-color: #fff;
    }
    .last{
        margin-top: 10px;
        display: inherit;
        width: 100%;
        justify-content: space-around;
        align-content: center;

        margin-bottom: 20px;
    }
    .details-right-note-item{
        display: flex;
        flex-direction: column;
        width: 28%;
        height: 120px;
        cursor: pointer;
        box-sizing: content-box;
        border: 1px solid #e4e4e4;
    }
    .details-right-note-item>i{
        font-size: 30px;
    }
    .details-right-note-item>p{
        font-size: 12px;
    }
    .icon1{
        color:#DB4453;
    }
    .icon2{
        color: #c9f2ff;
    }
    .icon3{
        color: #b39bd7;
    }

</style>